<template>
    <el-card>
        <!-- 账号列表 -->
        <div slot="header">
            <span>账号列表</span>
        </div>
        <!-- 表格 -->
        <el-table :data="tableData" style="width: 100%">
            <!-- 复选框 -->
            <el-table-column type="selection" width="55">
            </el-table-column>
            <!-- 账号 -->
            <el-table-column label="账号" width="150">
                <template slot-scope="scope">
                    <el-popover>
                        <div slot="reference">
                            <el-tag size="medium">{{ scope.row.account }}</el-tag>
                        </div>
                    </el-popover>
                </template>
            </el-table-column>
            <!-- 创建时间 -->
            <el-table-column label="创建时间" width="100">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.ctime | formater }}</span>
                </template>
            </el-table-column>
            <!-- 用户组 -->
            <el-table-column label="用户组" width="120">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.userGroup }}</span>
                </template>
            </el-table-column>
            <!-- 操作 -->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button size="mini" @click="edit(scope.row)">编辑</el-button>
                    <el-button size="mini" type="danger" @click="del(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="sizeChange" @current-change="currentChange" :page-sizes="[3, 5, 8, 10]"
            :current-page="currentPage" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>

        <!-- 修改用户信息弹出框 -->
        <el-dialog title="修改账号" :visible.sync="flag" width="400px">
            <el-form :model="form" label-width="80px" :rules="rules" ref="form">
                <el-form-item label="账户名" prop="account">
                    <el-input v-model="form.account" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="用户组">
                    <el-select v-model="form.userGroup" placeholder="请选择用户组">
                        <el-option label="普通管理员" value="普通管理员"></el-option>
                        <el-option label="超级管理员" value="超级管理员"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="flag = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit">确 定</el-button>
            </div>
        </el-dialog>
    </el-card>
</template>
<script>
import { userList, userDel, userEdit, userRepeat } from '@/api/user.js'
export default {
    data () {
        let checkUser = async function (rule, value, callback) {
            if (value.length >= 3) {
                let res = await userRepeat({ account: value })
                if (res.data.code === 201) {
                    callback(new Error(res.data.msg))
                }
            } else {
                callback(new Error('账号名长度在3个字符以上'))
            }
        }
        return {
            tableData: [],
            currentPage: 1,//当前显示在第几页
            pageSize: 5,//每页显示多少条
            total: 0,//数据总条数

            flag: false, //控制修改账号的弹出框是否显示

            form: {
                account: '',
                userGroup: '',
            },
            rules: {
                account: [
                    { required: true, message: '请输入账号', trigger: 'blur' },
                    { validator: checkUser, trigger: 'blur' }
                ],
            }
        }
    },
    methods: {
        edit (row) {
            this.flag = true;
            this.form = row; //将要修改的数据回填到form上
        },

        //保存修改后的数据
        saveEdit () {
            this.$refs.form.validate(async result => {
                if (result) {
                    let res = await userEdit(this.form);
                    if (res.data.code === 0) {
                        this.flag = false;
                    }
                };
            })

        },
        //删除数据
        async del (row) {
            let res = await userDel({ id: row.id })
            if (res.data.code === 0) {
                this.getData();
            }
        },
        //每一页显示条数,改变时触发
        sizeChange (val) {
            this.pageSize = val
            this.getData()
        },
        //当前页码改变时触发
        currentChange (val) {
            this.currentPage = val
            this.getData()
        },
        // 获取数据 渲染到页面
        async getData () {
            //读取用户列表数据
            let res = await userList({ currentPage: this.currentPage, pageSize: this.pageSize })
            this.tableData = res.data.data//渲染表格
            //分页
            this.total = res.data.total
        }
    },
    async created () {
        this.getData()
    },

}
</script>